Centering with Flexbox

A flex container with both the justify-content and the align-items properties set to center, will align the item(s) in the center (in both axis).

I am vertically and horizontally centered.

Centering with Grid

A grid container with the place-items property set to center, will align the item(s) in the center (in both axis).

I am vertically and horizontally centered.

Center with position and transform

Here, we use position and transform to vertically and horizontally center the p element inside the div:

I am vertically and horizontally centered.